<!--
 * @Descripttion: 
 * @Author: Kevin
 * @Date: 2022-06-13 17:02:25
 * @LastEditors: Tommy Chen
 * @LastEditTime: 2024-07-30
-->
<template>
  <div>
    <LayoutPanel class="private-common-wrapper">
      <div slot="title" class="title">
        <div class="title-content">
          <span>{{ $t('authLog.log') }}</span>
          <a-tooltip :title="$t('authLog.tip')">
            <icon-font type="ic-help" />
          </a-tooltip>
        </div>
      </div>
      <rj-table
        :columns="authLogColumns"
        :dataSource="authLogs"
        :pagination="pagination"
        :loading="isTableLoading"
        rowKey="uuid"
        filtercolumns
        @refeshTable="getLogList"
        @change="handleTableChange"
      >
        <div slot="customBlock" class="log-opt-wrapper">
          <a-space :size="16">
            <a-select
              v-model="deviceGroupId"
              @change="getLogList"
              style="width: 200px"
            >
              <icon-font type="ic-tree-device" slot="menuItemSelectedIcon" />
              <a-select-option
                v-for="item in authDeviceGroups"
                :key="item.id"
                :title="item.name"
              >
                {{ item.name }}
              </a-select-option>
            </a-select>
          </a-space>

          <!-- 过滤搜索 -->
          <a-input-search
            class="w-200"
            :placeholder="$t('userManage.accountPlaceholder')"
            v-model="queryParamObj.account"
            @change="onChangeSearch"
          />
        </div>

        <template slot="onlineStatus" slot-scope="text">
          <rj-space v-if="text == 0">
            <span class="offline status">{{ $t('common.offline') }}</span>
          </rj-space>
          <rj-space v-if="text == 1">
            <span class="online status">{{ $t('common.online') }}</span>
          </rj-space>
        </template>

        <template slot="timeColumn" slot-scope="text">
          {{ formatDate(text) }}
        </template>

        <template slot="deviceGroup" slot-scope="text">
          {{ getAuthDeviceGroupName(text) }}
        </template>

        <template slot="authType" slot-scope="text">
          {{ getPolicyTypeName(text) }}
        </template>
      </rj-table>
    </LayoutPanel>
  </div>
</template>

<script>
import { requestHttp, maccApi } from '@utils/index';
import LayoutPanel from '@views/common/deviceDetail/components/components/layoutPanel.vue';
import { RjTable } from '@components';
import authSysMixin from '@project/authSys/mixin/authSysMixin';
import { authLogColumns } from './columns.js';
import { authTypes } from '@project/authSys/views/authClient/authTypes';
import lodash from 'lodash';
import moment from 'moment-timezone';
export default {
  name: 'portalClient',
  mixins: [authSysMixin],
  components: {
    'rj-table': RjTable,
    LayoutPanel,
  },
  data() {
    return {
      authTypes,
      authLogColumns,
      pagination: {
        pageSizeOptions: ['10', '20', '50'],
        total: 0,
        current: 1,
        pageSize: 10,
      },
      authLogs: [],
      isTableLoading: false,
      authDeviceGroups: [
        {
          id: 0,
          name: this.$t('common.all'),
        },
      ],
      queryParamObj: {
        account: '',
      },
      deviceGroupId: 0,
      onlineClientNum: 0,
    };
  },
  async mounted() {
    await this.getAuthDeviceGroupList();
    this.getLogList();
    // this.getPortalClientCount();
  },
  computed: {
    authTypeMap() {
      const tempMap = {};
      this.authTypes.forEach((item) => {
        tempMap[item.value] = item.text;
      });
      return tempMap;
    },
    authDeviceGroupMap() {
      const tempMap = {};
      for (const group of this.authDeviceGroups) {
        tempMap[group.id] = group.name;
      }
      return tempMap;
    },
  },
  methods: {
    formatDate(updateTime) {
      return updateTime ? moment(updateTime).format('YYYY-MM-DD HH:mm:ss') : '';
    },
    onChangeSearch() {
      this.getListDebounce();
    },
    getListDebounce: lodash.debounce(function () {
      this.getLogList();
    }, 500),
    getAuthDeviceGroupName(value) {
      const groupName = this.authDeviceGroupMap[value];
      return groupName ? groupName : '';
    },
    getPolicyTypeName(authModeType) {
      return this.authTypeMap[authModeType]; // 显示具体的portal方式，sms，一键认证这些
    },

    async getAuthDeviceGroupList() {
      const res = await this.requestHttpAuth({
        api: maccApi.PRIVATE_DEVICE_GROUP_GET_API,
        method: 'GET',
        querys: {
          groupId: this.groupId,
          page: 1,
          size: 100,
        },
      });

      if (res.data.success) {
        this.authDeviceGroups = [
          ...this.authDeviceGroups,
          ...res.data.result.items,
        ];
      } else {
        this.$message.warning(res.data.message);
      }
    },

    handleTableChange(pagination, filterObj) {
      this.pagination = pagination;
      this.getLogList();
    },
    async getLogList() {
      const querys = {
        tenantId: this.tenantInfo.tenantId,
        page: this.pagination.current,
        size: this.pagination.pageSize,
        account: this.queryParamObj.account,
      };
      if (this.deviceGroupId) {
        querys.loginArea = this.deviceGroupId;
      }

      this.isTableLoading = true;
      const res = await this.requestHttpAuth({
        api: maccApi.MACC_LOG_GET_API,
        method: 'GET',
        replaces: {
          tenantName: this.tenantInfo.tenantName,
          groupId: this.groupId,
        },
        querys,
      });
      this.isTableLoading = false;
      if (res.data.success) {
        this.pagination.total = res.data.result.total;
        this.authLogs = res.data.result.items;
      } else {
        this.$message.warning(res.data.message);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.title-content {
  display: flex;
  align-items: center;
  gap: 8px;
}
.log-opt-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
}
.down-arrow {
  color: @success-color;
}
.up-arrow {
  color: @theme-color;
}
.status {
  display: flex;
  align-items: center;
  gap: 4px;
  &::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 3px;
  }
  &.online {
    &::before {
      background: @success-color;
    }
  }
  &.offline {
    &::before {
      background: @component-border;
    }
  }
}
.w-200 {
  width: 200px;
}
</style>
